<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 要先引用less文件 -->
    <link type="text/less" rel="stylesheet" href="./less/student.less">

    <!-- 引用bootstrap -->
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css" />
    <!-- 再去引用js文件 -->
    <script src="./js/less.js"></script>
    <script src="./js/utils.js"></script>

    
</head>
<body>

    <div class="outerbox">
        <span class="display">

        </span>
        姓名：<input type="text" id='name' placeholder="姓名"><br>
        年龄：<input type="text" id='age'placeholder="年龄"><br>
        成绩：<input type="text" id="achievement" placeholder="成绩"><br>

        <button class="submit btn-primary">提交</button>
        <button class="three btn-primary">前三</button>
        <button class="average btn-primary">平均值</button>


        <table class="table">
            <thead>
              <tr>
                <th scope="col">序列号</th>
                <th scope="col">姓名</th>
                <th scope="col">年龄</th>
                <th scope="col">成绩</th>
              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr> -->
            </tbody>
          </table>
        <!-- <div class="information"> 
            <div>
                <p>姓名：</p>
                <p>性别：</p>
                <p>成绩：</p>
            </div>
        </div> -->
    </div>
    <script>    

        let students = []; //创建一个新的数组，将学生的数据保存到这个数组里面来
        let renewMate;//存前三的数组

        //获取元素
        let display = $('display');

        //获取按钮
        let submit = $('.submit');
        let three = $('.three');
        let average = $('.average');

        let tbody = $('tbody');
        // let regex = /^[\u4e00-\u9fa5a-zA-Z]+&/;
        //编写正则表达式，检测所输入的值是否正确
        // const chineseRegex  = /[\u4E00-\u9FFF]+/;
        // const ageArea = /^(1[89]|30)$/;
        // const achievementArea = /^(?:100|[1-9]\d|\d)$/;

        let un = 1 ; 
        submit.onclick=function(){//提交按钮
            let name = document.getElementById('name').value;
            // if(!chineseRegex.test(name)){
            //     alert("请输入正确的姓名！");
            //     return;
            // }

            let age = document.getElementById('age').value;
            // if(!ageArea.test(age)){
            //     alert("请输入合适的年龄");
            //     return;
            // }

            let achievement = parseInt( document.getElementById("achievement").value);
            // if(achievementArea.test(average)){
                //     alert("请输入正确的分数");
                //     return;
                // }
                
                if(!name || !age || !achievement){ //如果为空 ，那么也就是输入框内没有内容取反true
                    alert('性别，年龄，成绩不能为空');
                    return null;
                }
                document.getElementById('name').value='';
                document.getElementById('age').value='';
                document.getElementById("achievement").value='';
                
                //将输入的值存放对象里面
                students.push({name,age,achievement});
                console.log(students);
                
                // 创建一个tr节点
            let nub = un++;
            var newre = document.createElement('tr');
            newre.innerHTML = ` <th scope="row">${nub}</th>
                                <td>${name}</td>
                                <td>${age}</td>
                                <td>${achievement}</td>`
            tbody.appendChild(newre);
            
        }

        three.onclick=function(){//前三的按钮
            if(students.length==0){
                return null;
            }
            //倒序排序
            let newMate=students.sort(function(val1,val2){
                return val2.achievement-val1.achievement;
            });
            renewMate = newMate.slice(0,3);
            console.log(renewMate);

            renewMate.forEach((res)=>{
                document.querySelector('.display').innerHTML+=
                "<div>"+"姓名:"+res.name+"性别:"+res.age+"成绩:"+res.achievement+"</div>";
            })           
        }
        
        //求平均值
        average.onclick=function(){
            let avervalue = 0; //存平均值
            for(let a = 0 ; a<students.length ; a++){
                avervalue+=students[a].achievement
            }
            avervalue=( avervalue/students.length);
            document.querySelector('.display').innerHTML+="全班的平均值"+avervalue;
        }

        //数据储存过程将数据转换为JOSN.stringify 字符串localStorage 保存到本地 =》JOSN.parse
        //localStorage 只能储存字符串
    </script>
</body>
</html>